<template>
  <table class="my-table">
    <tbody>
      <tr>
        <td v-for="(item, index) in dogInfo" :key="index">
          <img :src="item.imgSrc" alt="" />
          <p>{{ item.title }}</p>
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script>
export default {
  props: {
    dogInfo: {
      type: Array,
      required: true,
    },
  },
}
</script>
<style scoped>
.my-table {
  border-collapse: collapse;
  width: auto;
  margin: 0 auto;
}

.my-table td {
  border: 1px solid black;
  width: 200px;
  text-align: center;
}

.my-table td img {
  object-fit: cover;
  width: 200px;
  height: 200px;
}
</style>
